<template>
	<view class="userExtend">
		<!-- <u-sticky>
			<view class="sticky">
				<u-search focus shape="square" @change="handleSearchValue" placeholder="客户昵称" v-model="keyword"
					@custom="handleSearchValue" @search="handleSearchValue"></u-search>
			</view>
		</u-sticky> -->
		<view class="flex alignCenter memberOne" v-for="(item,index) in memberData" :key="index" @click="callPhone(item)">
			<image class="avatar" :src="item.avatar" mode="widthFix"></image>
			<view class="font14">
				<view class="hiddenOneline">{{item.nickName}}</view>
				<view class="colorccc tel">{{item.phoneNumber}}</view>
			</view>
		</view>
		<view v-if="memberData.length==0" class="u-p-t-50">
			<uni-nodata></uni-nodata>
		</view>
	</view>
</template>

<script>
	import {
		extendList,
		querySonFlower
	} from "@/api/mine.js"
	export default {
		data() {
			return {
				keyword: "",
				page: 1,
				pageSize: 10,
				pageTotal: 0,
				memberData: [],
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name + '的下级列表'
			})
			this.userId = option.userId
			this.getList()
		},
		methods: {
			callPhone(row){
				uni.makePhoneCall({
					phoneNumber: row.phoneNumber
				});
			},
			handleSearchValue() {
				console.log('this.keyword: ', this.keyword);
			},
			initPage() {
				this.page = 1;
				this.memberData = [];
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				querySonFlower(this.userId).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						this.memberData = this.memberData.concat(res.data)
						this.pageTotal = Math.ceil(res.data.total / this.pageSize)
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			}
		},
		onReachBottom() {
			if (this.page < this.pageTotal) {
				++this.page
				this.getList()
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: $pageBgColor;
	}
</style>
<style scoped lang="scss">
	// .userExtend{
	// 	padding: 30rpx 0;
	// 	box-sizing: border-box;
	// }
	.memberOne {
		// border-bottom: 1px solid $bordercolor;
		margin: 20rpx 0 0;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin: 0 20rpx 0 0;
		}

		.tel {
			margin: 10rpx 0 0;
		}
	}

	.memberOne:last-child {
		border-bottom: none;
	}

	.sticky {
		padding: 0 30rpx;
	}
</style>